<template>
	<view style="padding: 20px;">
<!-- 		<view class="item">
			<view class="label">
				头像
			</view>
			<view class="value">
				<image :src="user.avatar" style="width: 56px;border-radius: 28px;background-color: gray;" mode="widthFix"></image>
				<uni-icons type="right" color="gray" size="16"></uni-icons>
			</view>
		</view> -->
		<view class="item">
			<view class="label">
				用户名
			</view>
			<view class="value">
				<text>{{user.userName}}</text>
				<uni-icons type="right" color="gray" size="16"></uni-icons>
			</view>
		</view>
		<view class="item" @tap="updateNickname">
			<view class="label">
				昵称
			</view>
			<view class="value">
				<text>{{user.nickName}}</text>
				<uni-icons type="right" color="gray" size="16"></uni-icons>
			</view>
		</view>
		<view class="item">
			<view class="label">
				性别
			</view>
			<view class="value">
				<text>{{ sexs }}</text>
				<uni-icons type="right" color="gray" size="16"></uni-icons>
			</view>
		</view>
		<view class="item">
			<view class="label">
				电话
			</view>
			<view class="value">
				<text>{{user.phonenumber}}</text>
				<uni-icons type="right" color="gray" size="16"></uni-icons>
			</view>
		</view>
		<view class="item">
			<view class="label">
				邮箱
			</view>
			<view class="value">
				<text>{{user.email}}</text>
				<uni-icons type="right" color="gray" size="16"></uni-icons>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		onMounted,
		ref
	} from 'vue';
	
	import {
		useUserStore
	} from '@/store/store.js';
	const userStore = useUserStore()
	const user = ref(userStore.userInfo)
	const sexs = ref(userStore.userInfo.sex == 0 ? '男' : '女')

	
	
	const updateNickname = () => {
		uni.navigateTo({
			url: '/pages/my/update-nickname'
		})
	}
	
	
</script>

<style lang="scss">
.item{
	border-bottom: 1px solid #eeeeee;
	padding: 20px 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 16px;
	color: #333333;
	.value{
		display: flex;
		align-items: center;
		justify-content: flex-end;
		text{
			margin-left: 10px;
		}
	}
}
</style>